<template>
  <div style="overflow: hidden" v-title :data-title="title">
    <div class="information">
      <div>
        <hot-article v-bind="da" />
      </div>
      <div class="small-card">
        <small-card
          v-for="(card, index) in cardList"
          :key="index"
          v-bind="card"
        />
      </div>
    </div>
    <div class="viewcounts">
      <view-counts />
      <sex-counts />
    </div>
  </div>
</template>

<script>
import { hotArticle } from "@/api/article";
import HotArticle from "../components/index/HotArticle.vue";
import SmallCard from "../components/index/SmallCard.vue";
import { selectUser } from "@/api/user";
import { selectArticle } from "@/api/article";
import { selectCategory } from "@/api/category";
import { selectTag } from "@/api/tag";
import ViewCounts from "../components/index/ViewCounts.vue";
import SexCounts from "../components/index/SexCounts";

export default {
  components: { HotArticle, SmallCard, ViewCounts, SexCounts },
  name: "Information",
  data() {
    return {
      da: {
        hotArticleList: [],
      },
      cardList: [
        {
          image: require("../assets/user.png"),
          title: "用户数",
          detail: "",
          color: "#40c9c6",
          width: "200px",
        },
        {
          image: require("../assets/article.png"),
          title: "文章数",
          detail: "",
          color: "#36a3f7",
          width: "200px",
        },
        {
          image: require("../assets/catgory.png"),
          title: "文章类别",
          detail: "",
          color: "#f4516c",
          width: "200px",
        },
        {
          image: require("../assets/tag.png"),
          title: "标签",
          detail: "",
          color: "#34bfa3",
          width: "200px",
        },
      ],
    };
  },
  computed: {
    title() {
      return "信息统计 - news-back";
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      hotArticle()
        .then((res) => {
          console.log(res);
          res.data.forEach((element) => {
            element.preimg = element.preimg.split(",")[0];
          });
          this.da.hotArticleList = res.data;
        })
        .catch((err) => {
          console.log(err);
        });

      selectUser({
        current: 1,
        pageSize: 100000,
      })
        .then((res) => {
          this.cardList[0].detail = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取用户数失败",
          });
        });

      selectArticle({
        current: 1,
        pageSize: 10,
      })
        .then((res) => {
          this.cardList[1].detail = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取文章数失败",
          });
        });

      selectCategory({
        current: 1,
        pageSize: 100000,
      })
        .then((res) => {
          this.cardList[2].detail = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取类别数失败",
          });
        });

      selectTag({
        current: 1,
        pageSize: 100000,
      })
        .then((res) => {
          this.cardList[3].detail = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取标签数失败",
          });
        });
    },
  },
};
</script>

<style scoped>
.information {
  display: flex;
}
.small-card {
  display: flex;
  flex-wrap: wrap;
  margin-left: 50px;
}
.viewcounts {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>